<template>
    <div class="main">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据管理</el-breadcrumb-item>
        </el-breadcrumb>

        <br />

        <!--<lar-ui-plane v-if="model">-->
            <!--<lar-chart-line  :model="model">-->

            <!--</lar-chart-line>-->
        <!--</lar-ui-plane>-->


        <lar-ui-plane v-if="model">
            <lar-table  :model="model" :canAdd="canAdd"></lar-table>
        </lar-ui-plane>
        <el-dialog  custom-class="dialog"  :title="dialogTitle" :width="dialogWidth" :before-close="dialogConfirmClose" top="7vh" :visible.sync="dialogVisible">
            <router-view name="dialog" @title="setDialogTitle"  @change="dialogClose" @back="dialogClose"></router-view>
        </el-dialog>

    </div>
</template>
<script>
    export default {
        data () {
            return {
                model:'',
                test:'测试',
                tableTitle:'数据管理',
                dialogConfirmCancel:false,//锁定后,关闭要弹出确认
                dialogVisible: false,
                dialogTitle:'',
                dialogWidth:'40%',
                canAdd:true,
                temp: "",
                template: function () {
                    return null
                }
            }
        },
        render(h){
            return h('div', [this.template()]);
        },
        beforeRouteUpdate (to, from, next) {
            this.model = to.params.model;
            if (to.matched.some(record => record.meta.dialog)) {
//                ale
//                console.log(to);
                this.dialogVisible=true;
                //如果是弹出,model应该是读取之前旧的
                this.model = from.params.model;
            }
            next();
        },
//        beforeRouteLeave (to, from, next) {
//            // 导航离开该组件的对应路由时调用
//            // 可以访问组件实例 `this`
////            router.replace(location, onComplete?, onAbort?)
//        },

        watch:{
//            '$route' (to, from) {
//                alert(2);
//            }
        },
        computed: {
            dataChange: function(){
//                return this.$store.state.dataRefreshEvents[this.model];
            },
        },
        mounted () {
            this.model = this.$route.params.model;
            this.getComponent();
            this.setBodyWidth();
            window.onresize = ()=>{
                this.setBodyWidth();
            };
        },
        methods: {
            getComponent(){
                if(!this.model)
                    return '';
                this.loading=true;
                this.$http.get('/system/component/'+this.model+'/base.table',{  ttl: 3600 })
                    .then((response)=>{
                        this.loading=false;
                        if(response.data.status==1) {
                            this.renderHtml(response.data.data.html);
                        }else{
                            this.$message.error('Table返回结构异常');
                        }
                    })
                    .catch((error)=>{
                        this.loading=false;
                        this.$message.error('请求异常,Table模块错误');
                        // console.log(error);
                    });
            },
            //渲染模板,用服务器的模板
            renderHtml(html) {
                let result = Vue.compile(html);
                this.template = result.render;
            },
            setBodyWidth:function(){
                let bodyWidth = document.documentElement.clientWidth;
                if(bodyWidth>1440)
                    this.dialogWidth = '1000px';
                else if(bodyWidth>1024)
                    this.dialogWidth = '800px';
                else if(bodyWidth>850)
                    this.dialogWidth = '700px';
                else if(bodyWidth>768)
                    this.dialogWidth = '75%';
                else
                    this.dialogWidth = '95%';
            },
            dialogConfirmClose:function(done){
                if(this.dialogConfirmCancel) {
                    this.$confirm('是否放弃编辑内容？')
                        .then(_ => {
                            this.$router.go(-1);
                            done();
                        }).catch(_ => {});
                }else{
                    this.$router.go(-1);
                    done();
                }
            },
            dialogClose:function(){
                this.dialogVisible=false;
                this.$router.go(-1);
            },
            setDialogTitle:function(title){
                this.dialogTitle=title;
            }

        }
    }
</script>
<style scoped>
    .main{
        /*background: url(http://static.pctowap.com/dowap2/1.19-072201/img/bg.jpg) repeat-x;*/
        padding: 20px 25px;
    }
</style>